| 前端 CSS 三栏布局的方法有哪些？ | 您所在的位置：网站首页 › css 关键帧 › 前端 CSS 三栏布局的方法有哪些？ |
前端 CSS 三栏布局的方法有哪些？
|
关注我，更多精彩编程内容请访问主页  使用动态计算实现3栏布局
Document
*{
margin:0;padding:0
}
html,body{
height:100%
}
.top{
height:100px;
background-color: yellow;
}
.bot{
height:calc(100% - 100px);
background-color: orange;
}
.left{
width:200px;
/* height:200px; */
height:100%;
background-color: blue;
float: left;
}
.right{
width: 200px;
/* height:200px; */
height:100%;
background-color: blue;
float: left;
}
.center{
/* width: 300px; */
width:calc(100% - 400px);
/* height:300px; */
height:100%;
background-color: green;
float: left;
}
使用自适应的方法实现三栏布局+定位
Document
* {
margin: 0;
padding: 0
}
html,
body {
height: 100%
}
.top {
height: 100px;
background-color: yellow;
}
.bot {
height: calc(100% - 100px);
background-color: orange;
position: relative;
}
.left {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
/* float: right; */
position: absolute;
top:0px;
right:0px;
}
.center {
/* 中间的盒子使用自适应的方法:不设置宽度，宽度自适应的盒子，添加浮动后，还是自适应，但是是由文本撑开的 */
/* width: 300px; */
height: 300px;
margin:0px 200px;
background-color: green;
}
使用自适应的方法实现三栏布局+调整布局
Document
* {
margin: 0;
padding: 0
}
html,
body {
height: 100%
}
.top {
height: 100px;
background-color: yellow;
}
.bot {
height: calc(100% - 100px);
background-color: orange;
}
.left {
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
.right {
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
.center {
/* 中间的盒子使用自适应的方法:不设置宽度 */
/* width: 300px; */
height: 300px;
background-color: green;
margin: 0px 200px;
}
欢迎访问主页获取更多精彩内容 轻松掌握循环语句关键字break与continue，JavaScript编程经验 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/605583001 声明关键字var let const的使用及对比 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/597713100 冒泡排序详解，程序员面试重点问题 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/596053984 漫话for循环，执行过程逐步分析[编程必学必会] - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/595738306 图书管理系统（前后端分离模式）项目的运行过程 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/594327656 css中的内外边距如何区分？两者什么情况下有一样的效果呢？ - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/591387672 linux常用命令大全linux运维必备 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/607643635 使用不同遍历方法对数组求和[javascript进阶] - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/607558889 一张图搞懂JavaScript数组方法，改变数组的增删改排序方法 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/603362761 一张记忆卡片看懂JavaScript数组迭代方法，前端从入门到精通 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/602467570 一文搞定background属性及属性值，css背景属性全家桶 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/597496645 CSS高级选择器的作用及案例代码演示 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/595447542 如何理解CSS样式表权重与优先级 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/595425961 2023最新版编程算法书籍推荐，算法学习干货分享 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/605812156 CSS3动画方式实现关键帧动画（2）前端知识分享 - diveng的文章 - 知乎 https://zhuanlan.zhihu.com/p/598776421 |
【本文地址】